{% extends "program.html.twig" %}

{% block program %}
    <div class="row">
        <div class="col-xs-12">
            <h4 class="text-center">{{ pageheader }}</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-lg-6 col-lg-offset-3">
            <form class="form-horizontal" method="post" action="{{ urlFor('update-venue', {'id': venue.venue_id}) }}">
                <div class="form-group">
                    <label for="venue-name">Venue</label>
                    <input type="text" class="form-control input-lg" name="venue-name" value="{{ venue.venue_name }}" required/>
                </div>
                <div class="form-group">
                    <label for="venue-order-number">Order number</label>
                    <input type="text" class="form-control input-lg" name="venue-order-number" value="{{ venue.venue_order_number }}" required/>
                </div>
                <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3 col-lg-4 col-lg-offset-4">
                        <button type="submit" class="width-35 btn btn-sm btn-default btn-block">
                            Submit update
                        </button>
                    </div>
                </div>

                {% if error is not empty %}
                    <h3 class="text-center"><span class="label label-danger">{{ error }}</span></h3>
                {% endif %}
            </form>
        </div>
    </div>
    <br><br> 
    <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-lg-6 col-lg-offset-3">
            <form class="form-horizontal" method="post" action="{{ urlFor('remove-venue', {'id': venue.venue_id}) }}">
                <div class="form-group">
                    <label for="remove">Type 'remove' here to remove</label>
                    <input type="text" class="form-control input-lg" name="remove" id="remove-input" />
                </div>
                <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3 col-lg-4 col-lg-offset-4">
                        <button type="submit" class="width-35 text-center btn btn-sm btn-danger btn-block" disabled id="remove-button">
                            Remove
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
    $(function(){
        $('#remove-input').keyup(function() {
            var value = $(this).val();
            if(value === "remove"){
                $('#remove-button').removeAttr('disabled');
            } else {
                $('#remove-button').attr('disabled', 'disabled');
            }
        }).keyup();
    });
</script>
{% endblock %}